<template>
  <view class="complaint-page">
    <!-- 投诉功能入口 -->
    <view class="complaint-functions">
      <!-- 提交投诉 -->
      <service-card
        title="提交投诉"
        description="提交新的投诉或建议"
        icon-name="edit"
        theme-color="#ff4757"
        @click="goToSubmitComplaint"
      />

      <!-- 投诉记录 -->
      <service-card
        title="投诉记录"
        description="查看历史投诉记录"
        icon-name="list"
        theme-color="#9b59b6"
        :badge="pendingBadge"
        badge-icon="clock"
        badge-color="#ff9500"
        @click="goToComplaintRecords"
      />

      <!-- 投诉分类 -->
      <service-card
        title="投诉分类"
        description="按类型查看投诉"
        icon-name="grid"
        theme-color="#3498db"
        @click="goToComplaintCategories"
      />

      <!-- 满意度评价 -->
      <service-card
        title="满意度评价"
        description="对处理结果进行评价"
        icon-name="star"
        theme-color="#ff9500"
        @click="goToSatisfaction"
      />

      <!-- 常见问题 -->
      <service-card
        title="常见问题"
        description="查看常见问题解答"
        icon-name="help-circle"
        theme-color="#27ae60"
        @click="goToFAQ"
      />

      <!-- 投诉设置 -->
      <service-card
        title="投诉设置"
        description="通知设置、自动回复"
        icon-name="setting"
        theme-color="#95a5a6"
        @click="goToComplaintSettings"
      />
    </view>

  </view>
</template>

<script setup>
/**
 * 投诉建议页面 - 重构版本
 * @author Wu.Liang
 * @date 2025-01-21
 * @version 2.0 - 按照ServiceCard组件规范重构
 */

import { ref, reactive, computed, onMounted } from 'vue'
import ServiceCard from '@/components/ServiceCard.vue'
import { getIconThemeColor } from '@/utils/themeColors'
import { hasMenuPermission } from '@/utils/permission'

// 投诉记录
const complaintHistory = ref([
  {
    id: 1,
    title: '小区路灯不亮',
    type: 'facility',
    typeText: '设施问题',
    createTime: '2025-01-21 14:30',
    statusText: '处理中',
    statusType: 'warning',
    urgency: '2',
    urgencyText: '紧急'
  },
  {
    id: 2,
    title: '电梯故障',
    type: 'facility',
    typeText: '设施问题',
    createTime: '2025-01-20 09:15',
    statusText: '已解决',
    statusType: 'success',
    urgency: '3',
    urgencyText: '非常紧急'
  },
  {
    id: 3,
    title: '噪音扰民',
    type: 'noise',
    typeText: '噪音问题',
    createTime: '2025-01-19 22:00',
    statusText: '待处理',
    statusType: 'info',
    urgency: '1',
    urgencyText: '一般'
  }
])

// 快速投诉类型
const quickComplaintTypes = ref([
  {
    value: 'facility',
    label: '设施问题',
    icon: 'tools',
    color: '#3498db'
  },
  {
    value: 'noise',
    label: '噪音问题',
    icon: 'volume-high',
    color: '#ff4757'
  },
  {
    value: 'security',
    label: '安全问题',
    icon: 'shield',
    color: '#ff9500'
  },
  {
    value: 'environment',
    label: '环境问题',
    icon: 'leaf',
    color: '#2ed573'
  }
])

// 投诉统计
const statistics = reactive({
  total: 15,
  pending: 3,
  resolved: 12
})

// 计算属性
const recentComplaints = computed(() => {
  return complaintHistory.value.slice(0, 3) // 只显示最近3条记录
})

const pendingComplaints = computed(() => {
  return complaintHistory.value.filter(item => item.statusType === 'warning' || item.statusType === 'info')
})

const pendingBadge = computed(() => {
  return pendingComplaints.value.length > 0 ? pendingComplaints.value.length.toString() : ''
})

// 获取投诉图标
const getComplaintIcon = (type) => {
  const iconMap = {
    'facility': 'tools',
    'noise': 'volume-high',
    'security': 'shield',
    'environment': 'leaf',
    'service': 'user',
    'other': 'help-circle'
  }
  return iconMap[type] || 'file-text'
}

// 页面跳转方法
const goToSubmitComplaint = () => {
  uni.navigateTo({ url: '/pages/complaint/submit' })
}

const goToComplaintRecords = () => {
  uni.navigateTo({ url: '/pages/complaint/records' })
}

const goToComplaintCategories = () => {
  uni.navigateTo({ url: '/pages/complaint/categories' })
}

const goToSatisfaction = () => {
  uni.navigateTo({ url: '/pages/complaint/satisfaction' })
}

const goToFAQ = () => {
  uni.navigateTo({ url: '/pages/complaint/faq' })
}

const goToComplaintSettings = () => {
  uni.navigateTo({ url: '/pages/complaint/settings' })
}

// 查看投诉详情
const viewDetail = (item) => {
  uni.navigateTo({
    url: `/pages/complaint/detail?id=${item.id}`
  })
}

// 快速投诉
const quickComplaint = (type) => {
  uni.navigateTo({
    url: `/pages/complaint/submit?type=${type.value}`
  })
}

// 页面加载
onMounted(() => {
  // 加载投诉记录数据
  loadComplaintHistory()
  // 加载投诉统计
  loadComplaintStatistics()
})

// 数据加载方法
const loadComplaintHistory = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载投诉记录')
  } catch (error) {
    console.error('加载投诉记录失败:', error)
  }
}

const loadComplaintStatistics = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载投诉统计')
  } catch (error) {
    console.error('加载投诉统计失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.complaint-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
  
  // 小屏幕适配
  @media screen and (max-width: 375px) {
    padding: 12px;
  }
  
  // 中等屏幕适配
  @media screen and (min-width: 376px) and (max-width: 768px) {
    padding: 16px;
  }
  
  // 大屏幕适配
  @media screen and (min-width: 769px) {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
  }
}

.complaint-functions {
  margin-bottom: 20px;
}

.recent-complaints,
.pending-complaints,
.complaint-statistics,
.quick-complaint {
  margin-bottom: 20px;
  
  .complaint-list,
  .pending-list {
    .complaint-item,
    .pending-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .complaint-icon,
      .pending-icon {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        flex-shrink: 0;
      }
      
      .complaint-info,
      .pending-content {
        flex: 1;
        min-width: 0;
        
        .complaint-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 4px;
          
          .complaint-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
          }
        }
        
        .complaint-time,
        .complaint-type,
        .pending-title,
        .pending-time,
        .pending-urgency {
          display: block;
          font-size: 12px;
          color: #666;
          margin-bottom: 2px;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
        
        .pending-title {
          font-weight: 600;
          color: #333;
        }
      }
    }
  }
  
  .statistics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      
      .stat-icon {
        margin-bottom: 8px;
      }
      
      .stat-number {
        font-size: 24px;
        font-weight: 700;
        color: #333;
        margin-bottom: 4px;
      }
      
      .stat-text {
        font-size: 12px;
        color: #666;
      }
    }
  }
  
  .quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    
    .quick-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.95);
      }
      
      .quick-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
      }
      
      .quick-text {
        font-size: 12px;
        color: #333;
        text-align: center;
      }
    }
  }
}
</style> 